<template>
  <div class="card h100">
    <div class="title">
      <span>采购</span>
    </div>
    <div class="content h100">
      <echarts
        :chart-data="totalFailureChartOptions"></echarts>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        systemData: [],
        totalNum: 0
      }
    },
    computed: {
      // 总故障
      totalFailureChartOptions() {
        return {
          color: ['#76e570', '#ff9f59', '#f7534c', '#DCDBE0'],
          hasData: true,
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: 0,
            top: '20%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '邮件营销',
              type: 'line',
              stack: '总量',
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: '联盟广告',
              type: 'line',
              stack: '总量',
              data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
              name: '视频广告',
              type: 'line',
              stack: '总量',
              data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
              name: '直接访问',
              type: 'line',
              stack: '总量',
              data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
              name: '搜索引擎',
              type: 'line',
              stack: '总量',
              data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
          ]
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
    @import "./common.scss";
    .card{
      .title{
        display: flex;
        justify-content: space-between;
      }
      .btn-active{
        background: #0BB976;
        color: #fff;
      }
    }
    .content{
      padding: 0 10px;
      height: calc(100% - 100px);
    }
    .content-info{
      overflow: auto;
      height:30%;
      &>div{
        min-width: 150px;
        background: #F2F2F7;
        float: left;
        padding:8px 10px;
        @include border;
        margin-right: 20px;
        line-height: 30px;
        margin-bottom: 10px;
        &>b{
          color: #FF3A30;
        }
        &>p{
          color: #B4B4C8;
          margin: 0;
        }
      }
    }
    .conten-chart{
      margin: 15px 0 20px;
      // .chart-box{
      //   height: 180px;
      // }
    }
</style>
